<template>
	<div class="weekend">
		<div class="weekend-desc">
			<div class="weekend-desc-content">
				<span>/////////<span class="zou">周末出游</span>/////////</span>
				<p>致力推荐超完美套餐</p>
			</div>
		</div>
		<div class="weekend-swiper">
			<div class="swiper">
		       <swiper :options="swiperOption">
                    <swiper-slide
                    	v-for="item of weekendSWIPR"
		        	        :key ="item.id"
                    	>
						<div class="weekendSwiper-item">
							<div class="weekendSwiper-img">
								<img :src="item.imgUrl">
							</div>
							<div class="weekendSwiper-desc">
							{{item.desc}}
							<p> {{item.desc1}}</p>
							
						</div>
						</div>
						 
                    </swiper-slide>
		       </swiper>	 
           </div>
		</div>
	</div>
</template> 

<script>
	//	定义输出组件name
export default {
 name: 'homeWeekend',
 props:{
  weekendSWIPR:Array
 },
 data(){
	 return{
	
		 swiperOption:{
			 freeMode:true,
			 spaceBetween:-250,
//			 slidesPerview:3
			 
		 }
	 }
 }
}  
</script>

  <!--给css样式设置语言工具stylus-->
<style scoped="scoped">
.weekend{
	margin-top: 7px;
	overflow: hidden;
	width:  100%;
	height: 0;
	padding-bottom: 45%;
	 background-color:rgb(250, 246, 246);
	 position: relative;
	 
}
.weekend-desc{
   /* height: 20%; */
	position: absolute;
 top: 13%;
 left: 50%;
 transform: translate(-50%,-50%);
 
} 
.weekendSwiper-item{
	border: solid #CCCCCC 1px;
	overflow: hidden;
	width: 30%;
	height: 0;
	padding-bottom: 50%;
	margin: 0px 5px;
	/* width: 100%; */

}
.weekend-swiper{
	height: 0%;
	width: 100%;
	position: absolute;
	top: 30%;
} 
.weekendSwiper-img img{
	width: 80%;
	height: 80%;
	margin: 5px 10px;
	/*display: inline-block;*/
	
}
.weekendSwiper-desc{
	
	text-align: center;

}
.weekend-desc-content p{
	padding-top: 6px;
	color: #8b8b8b;
}
.weekend-desc-content span {
color: #CCCCCC;
}
 .weekend-desc-content .zou{
	font-size:17px;
	color: #000000;
}



  
</style>

